<template>
	<view class="menu-content" v-if="menuList">
		<swiper class="swiper" :style="heightComputed">
			<swiper-item v-for="page in menuList" :key="page.id">
				<navigator class="menu-item" v-for="item, index in page.list" :key="index" :url="item.url">
					<image :src="item.imageSrc" mode=""></image>
					<view class="nav-text">
						{{item.text}}
					</view>
				</navigator>
				
			</swiper-item>
		</swiper>
	</view>
	
</template>

<script>
	export default {
		name:"mymenu",
		props:['list'],
		onLoad() {
			
		},
		mounted() {
			this.pagesComputed()
		},
		computed: {
			heightComputed() {
				return {height: (this.list.length > 5? 2 : 1) * 100 + 'rpx'}
			},
			
		},
		data() {
			return {
				menuList: null,
			};
		},
		methods: {
			pagesComputed() {
				this.menuList = []
				for (let i = 0; i < this.list.length; i += 10) {
					
					this.menuList.push({
						id: 1000 + i,
						list: this.list.slice(i, i + 10 <= this.list.length? i + 10: this.list.length)
					})
				
				}
				
				// console.log(this.menuList)
			}
		}
	}
</script>

<style lang="scss">
	.menu-content {
		width: 100%;
		
		border-radius: 14rpx;
		background: url(../static/menuImage/navbg.jpg);
		background-size: 100% 100%;
		.swiper {
			
			
			swiper-item {
				display: flex;
				// justify-content: left;
				flex-wrap: wrap;
				margin-top: 10rpx;
				// align-items: center;
				// overflow: hidden;
				
				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					// align-items: center;
					height: 80rpx;
					width: 20%;
					image { 
						width: 50rpx;
						height: 50rpx;
						border-radius: 25rpx;
					}
					
					.nav-text {
						// font-size: 18rpx;
						// font-weight: 700;
						
						margin-top: .3rem;
						font-size: .6rem;
						color: #666;
					
					}
				}
			}
		}
	}
</style>
